<!-- api绑定 -->
<template>
  <view class="container">
    <view class="form">
			<u-form :model="form" ref="uForm" >
				<view class="test">
					<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" 
						 label="市场" prop="market" label-width="150" >
						<u-input  placeholder="请输入市场" v-model="form.market" type="select" @click="showMarket = true"></u-input>
					</u-form-item>
          <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" 
						 label="AccessKey" prop="AccessKey" label-width="150" >
						<u-input  placeholder="请输入AccessKey" v-model="form.publicKey" type="text" ></u-input>
					</u-form-item>
          <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" 
						 label="SecretKey" prop="SecretKey" label-width="150" >
						<u-input  placeholder="请输入SecretKey" v-model="form.privateKey" type="text" ></u-input>
					</u-form-item>
					
				</view>
			</u-form>
			<u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle1" @click="bind">绑定连接</u-button>
			<u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle2" @click="del" :hidden="!this.form.keyId">删除API</u-button>
			<!-- <u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle3">更新币种</u-button> -->
      <u-action-sheet :list="marketList" v-model="showMarket" @click="marketCallback" ></u-action-sheet>
		</view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      // 市场
      showMarket: false,
      marketList: [{ marketName: "Huobi合约" }, { text: "Binance合约" }],
      market: "",
      form: {
					market: "",
          marketId:'',
        publicKey: "",
        privateKey: "",
				},
        customStyle1:{
          margin:'20rpx 0',
          fontWeight: 'bold',
          color: '#FFFFFF',
          background:'#1488FF'
        },
        customStyle2:{
          margin:'20rpx 0',
          fontWeight: 'bold',
          color: '#FFFFFF',
          background:'#FE5021'
        },
        customStyle3:{
          margin:'20rpx 0',
          fontWeight: 'bold',
          color: '#FFFFFF',
          background:'#FFB400'
        }
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.getMarketList()
  },

  methods: {
    getMarketList(){
      this.$http.get('app/t-strategy-market').then(res => {
        console.log(res)
        this.marketList = res
      })
    },
    marketCallback(index) {
      this.form.market = this.marketList[index].text;
      this.form.marketId = this.marketList[index].id
      this.$http.get(`app/t-user-strategy-key/detail?marketId=${this.form.marketId}`).then(res => {
        console.log(res)
        if(res){
          this.form = res
          this.form.market = res.text;
        } else {
          this.form.publicKey = ''
          this.form.privateKey = ''
          this.form.keyId = 0
        }
      })
    },
    bind(){
      if(this.$u.func.isParamEmpty(this.form)) {
        this.$u.func.showToast("请完善参数")
        return
      }
      console.log(this.form)
      this.$http.post('app/t-user-strategy-key', this.form).then(res=>{
        this.$u.func.showToast("新增成功")
      })
    },
    del(){
      console.log('del', this.form)
      if(!this.form.keyId && this.form.marketId){
        this.$u.func.showToast("请先选择市场")
        return
      }
      this.$http.delete(`app/t-user-strategy-key?id=${this.form.keyId}`).then(res =>{
        console.log('res', res)
        if(res){
          this.$u.func.showToast("删除成功")
          this.form = {}
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.container {
  min-height: 100vh;
  background-color: #fff;
  .form {
			padding: 30rpx;
  }
}
</style>